<template>
	<view>
		<water-mark :meta="meta"></water-mark>
		<view class="not-btn">
			<question-header :subject='currentSubject' :info="getHomeworkInfo"></question-header>
			<view class="question">
				<question-stem :subject="currentSubject" :subjectSize="getHomeworkInfo.subjectSize"></question-stem>
				<multi-choice v-if="currentSubject.type=='3'" :choices="currentSubject.subjectChoices" :selectedChoice="currentSubject.selectChoice"
				 @change='choiceChange'></multi-choice>
				<textarea v-else-if="currentSubject.type=='5'" class="txt" placeholder="填写你的答案" v-model="currentSubject.answerContent"></textarea>
				<single-choice v-else :choices="currentSubject.subjectChoices" @change='choiceChange'></single-choice>
			</view>
		</view>
		<view class="btn">
			<view class="btn-left" @click="last">
				<text class="btn-textl">上一题</text>
			</view>
			<view class="btn-right" @click="next">
				<text v-if="isLast" class="btn-text">提交</text>
				<text v-else class="btn-text">下一题</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		isEmpty,
		showToast
	} from '@/utils/index.js'
	import QuestionHeader from '@/pages/homework/fragment/QuestionHeader';
	import QuestionStem from '@/pages/homework/fragment/QuestionStem';
	import SingleChoice from '@/pages/exam/fragments/SingleChoice';
	import MultiChoice from '@/pages/exam/fragments/MultiChoice';
	import navbarExam from '@/mixins/common/navbar/exam';
	import userMixin from '@/mixins/user/index.js'
	import homeworkMixin from '@/mixins/homework.js';
	export default {
		components: {
			QuestionHeader,
			QuestionStem,
			SingleChoice,
			MultiChoice
		},
		mixins: [navbarExam, userMixin,homeworkMixin],
		data() {
			return {
				// noData: false,
				// showSkeleton: true,
				examBarData: [{
						img: '/static/exam/examBar03.png',
						text: '答题卡',
						id: 'card',
						type: 'static',
						onPress: (context) => {
							uni.navigateTo({
								url: "/pages/homework/answerSheet"
							})
						}
					},
					{
						img: '/static/exam/examBar04.png',
						text: '00:00:00',
						type: 'dynamics',
						id: 'time',
						onPress: (context) => {}
					}
				]

			}
		},
		computed: {
			...mapGetters('homeworkStore', [
				'getHomeworkInfo', 'currentSubject', 'currentIndex'
			]),
			isLast() {
				return this.currentIndex == this.getHomeworkInfo.subjectSize - 1
			},
			isFirst() {
				return this.currentIndex == 0
			}
		},
		onLoad() {
			//答题卡页面操作，时间做相应的处理
			uni.$on('onSheet', (payload) => {
				const {
					optionType
				} = payload;
				if ('submit' == optionType) {
					this.saveSingleTime() //保存单题时间
					this.stop(); //停止计时
					const usedTime = this.totalTime();
					this.updateUsedTime(usedTime); //共享总用时
				} else if ('clickIndex' == optionType) {
					this.saveSingleTime() //保存单题时间
				}
			});
			//开始计时
			this.start();
		},
		onUnload() {
			uni.$off('onSheet');
		},
		methods: {
			...mapMutations('homeworkStore', [
				'setCurrentIndex', 'setItemChoice', 'updateUsedTime'
			]),
			...mapActions('homeworkStore', [
				'submitHomework'
			]),
			choiceChange(value) {
				this.setItemChoice(value);
				console.log(value)
			},
			last() {
				if (this.isFirst) {
					showToast('已经是第一题了');
					return;
				}
				this.saveSingleTime(); //保存单题计时
				this.setCurrentIndex(this.currentIndex - 1);
			},
			next() {
				if (this.isLast) {
					this.submitHomework();
					return;
				}
				let callback = () => {
					this.saveSingleTime() //保存单题时间
					this.setCurrentIndex(this.currentIndex + 1);
				}
				if (isEmpty(this.currentSubject.selectChoice)) {
					const content = "您还没有选择答案,确定要进入下一题吗？"
					uni.showModal({
						content: content,
						success: (res) => {
							if (res.confirm) {
								callback();
							}
						}
					})
				} else {
					callback();
				}
			},
			onBackPress(options) {
				if (options.from === 'navigateBack') {
					return false;
				}
				// if (this.noData || this.showSkeleton) {
				// 	uni.navigateBack({
				// 		delta:1
				// 	})
				// 	return true;
				// }
				uni.showModal({
					content: "确定要退出测评？退出后不保存记录",
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack({
								delta:1
							})
						}
					}
				});
				return true;
			}
		}
	}
</script>

<style lang='scss' scoped>
	.not-btn {
		margin-bottom: 90upx;
	}

	.question {
		border-radius: 8rpx;
		box-shadow: 0 0 10upx #eaeaea;
		padding: 30upx 30upx;
		font-size: 30upx;
		margin: 20upx;
		margin-bottom: 40upx;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		line-height: 80upx;

		&-left {
			display: inline-block;
			width: 50%;
			height: 80upx;
			background: #fff;
			box-shadow: 0 -1upx 10upx #ccc;
		}

		&-right {
			display: inline-block;
			width: 50%;
			height: 80upx;
			background: #5ea1f8;
			box-shadow: 0 -1upx 10upx #ccc;
		}

		&-textl {
			font-size: 28upx;
			color: #333;
		}

		&-text {
			font-size: 28upx;
			color: #fff;
		}
	}

	.txt {
		font-size: 28upx;
		color: #666666;
		padding: 20upx;
		background-color: #f4f6f8;
		border-radius: 8upx;
		width: 100%;
		margin-top: 30upx;
	}
</style>
